import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
import _ from 'lodash'
import { saveAs } from 'file-saver';

// 添加监听事件
const dropZone = document.querySelector('#box');
const preview = document.querySelector('.before')
console.log(dropZone)
const fix = document.getElementsByClassName('fix-text')[0];
// 文件悬浮在浏览器上
dropZone.addEventListener("dragover", function (e) {
    e.preventDefault();
    e.stopPropagation();
    fix.innerHTML = '你倒是放下啊'
}, false);
// dropZone.addEventListener("dragenter", function (e) {
//     e.preventDefault();
//     console.log(e)
//     fix.innerHTML = '你试试'
// }, false);

// 拖拽文件离开浏览器文档
dropZone.addEventListener("dragleave", function (e) {
    e.preventDefault();
    // e.stopPropagation();
    console.log('我离开啦！')
    fix.style.display = 'block'
    fix.innerHTML = '拖拽图片'
}, false);



const image = document.createElement('img');
image.classList.add('image-box')
const handler = document.querySelectorAll('.setAspectRatio')
console.log(handler);

const handlerBox = document.querySelector('#handler')
let cropper;
dropZone.addEventListener("drop", function (event) {
    event.preventDefault();
    event.stopPropagation();
    var df = event.dataTransfer;
    console.log(df.items, df.files)
    if(df.files.length > 1){
        console.log('只能上传一个文件！')
    }
    var dropFiles = []; // 存放拖拽的文件对象

    if (df.items !== undefined) {
        // Chrome有items属性，对Chrome的单独处理
        for (var i = 0; i < df.items.length; i++) {
            var item = df.items[i];
            // 用webkitGetAsEntry禁止上传目录
            if (item.kind === "file" && item.webkitGetAsEntry().isFile) {
                var file = item.getAsFile();
                dropFiles.push(file);
            }
        }
    }
    console.log(dropFiles)
    let reader = new FileReader();
    reader.onload = function (evt) {
        fix.style.display = 'none'
        let base64 = evt.target.result;
        image.src= base64
        dropZone.appendChild(image)
        cropper = new Cropper(image, {
            viewMode: 1,
            aspectRatio: 16 / 9,
            preview: '.before',
            rotatable: true, // 是否允许旋转图片  
            crop(event) {
              console.log(event.detail.x);
              console.log(event.detail.y);
              console.log(event.detail.width);
              console.log(event.detail.height);
              console.log(event.detail.rotate);
              console.log(event.detail.scaleX);
              console.log(event.detail.scaleY);
            },
          });
        handlerBox.style.display = 'block';
        for (let index = 0; index < 3; index++) {
            let i = index
            if(i === 2){
                handler[i].onclick = function(){
                    cropper.setAspectRatio(3/2)
                }
            }else{
                handler[i].onclick = function(){
                    cropper.setAspectRatio(index+1)
                }
            }
            
        }
        let a = document.getElementById('save')
        a.onclick = ()=>{
            console.log(cropper.getData())
            console.log(cropper.getCroppedCanvas({imageSmoothingQuality: 'high'}).toDataURL("image/png", 1.0))
            cropper.getCroppedCanvas({imageSmoothingQuality: 'high'}).toBlob(function(blob) {
                var a = document.createElement("a");
                a.textContent = "Download";
                document.body.appendChild(a);
                a.style.display = "block";
                a.download = '海拔底图' + ".png";
                a.href = window.URL.createObjectURL(blob);
                a.click()
                a.parentNode.removeChild(a);
              })
            
        }
    };
    reader.readAsDataURL(dropFiles[0]);
}, false)





// new Cropper(document.getElementById('cropperBox'), {
//     viewMode: 1,
//     dragMode: 'none',
//     initialAspectRatio: 1,
//     aspectRatio: 1,
//     preview: '.before',
//     background: false,
//     autoCropArea: 0.6,
//     zoomOnWheel: false,
// })